<template>
	<view class="question-container">
		<u-sticky>
			<u-navbar bgColor="#ffffff" placeholder>
				<view slot="left" style="display: flex;align-items: center;">
					<text style="color: #010101;font-size: 16px;margin-right: 5px;">{{ pageName }}</text>
					<u-search v-model="queryParams.productTitle" placeholder="请输入关键字" height="60rpx" bgColor="#f3f4f6"
						searchIconColor="#606266" :showAction="false" clearabled @clear="handleQuery()"
						@search="handleQuery()"></u-search>
				</view>
			</u-navbar>

			<view class="tabs-wrapper">
				<u-tabs :list="tabList" :current="currentTab" @change="switchCurrentTab" lineWidth="25"
					lineColor="linear-gradient(to right, #4facfe 0%, #00f2fe 100%);" :activeStyle="{
				            color: '#303133',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#606266',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 45px;">
					<view slot="right" style="padding-left: 5px;" @click="handleSearch()">
						<u-icon name="list" size="28"></u-icon>
					</view>
				</u-tabs>
			</view>
		</u-sticky>
		
		<view class="question-btn" @click="goUserQuestion()">
			<text style="color: #ffffff;font-size: 13px;">AI对话</text>
			<!-- <u-icon name="plus" size="16" color="#ffffff"></u-icon> -->
		</view>

		<view class="question-wrap">
			<view style="padding: 10px 0px;">
				<u-swiper height="350rpx" :list="bannerList" showTitle circular @click="goNewsDetail()"></u-swiper>
			</view>

			<view class="question-items" v-for="(item, index) in questionList" :key="index">
				<view class="question-left">
					<view class="question-title">{{ item.title }}</view>

					<view class="question-img" v-if="item.imgUrl.length > 1">
						<view class="item" v-for="(url, uIndex) in item.imgUrl" :key="uIndex">
							<u--image :src="url" width="230rpx" height="160rpx" radius="5px"></u--image>
						</view>
					</view>
					<view class="question-img" v-else></view>

					<view class="question-info">
						<text>{{ item.author }} {{ item.count }}阅读</text>
					</view>
				</view>
				<block v-if="item.imgUrl.length === 1">
					<u--image :src="item.imgUrl[0]" width="230rpx" height="160rpx" radius="5px"></u--image>
				</block>
			</view>
			<Loadmore :isMore="true"></Loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageName: '知识专栏',
				currentTab: 0,
				tabList: [{
						name: '推荐',
					},
					{
						name: '关注',
					},
					{
						name: '电影'
					}, {
						name: '科技'
					}, {
						name: '音乐'
					}, {
						name: '美食'
					}, {
						name: '文化'
					}, {
						name: '财经'
					}, {
						name: '手工'
					}
				],
				bannerList: [
					{
						title: "探索均衡饮食的重要性：如何在忙碌的生活中保持营养均衡",
						url: "https://s3.bmp.ovh/imgs/2024/05/31/4e8e398144621866.jpeg"
					},
					{
						title: "心理健康秘诀：如何在快节奏的现代生活中实现内心平静",
						url: "https://s3.bmp.ovh/imgs/2024/05/31/4616fb1d6c9e2332.jpeg"
					},
					{
						title: "睡眠质量对健康的影响：如何优化睡眠环境以提高睡眠质量",
						url: "https://s3.bmp.ovh/imgs/2024/05/31/82317232a43806a4.jpeg"
					},
				],
				questionList: [{
						"title": "心理健康秘诀：如何在快节奏的现代生活中实现内心平静",
						"author": "心灵导航者",
						"count": 30,
						"imgUrl": []
					}, {
						"title": "健康饮食：如何平衡您的营养摄入",
						"author": "营养达人",
						"count": 15,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/8efe57629ec806d4.jpeg"
						]
					},
					{
						"title": "走进自然：户外运动对身心健康的多重益处探讨",
						"author": "户外探险家",
						"count": 25,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/4616fb1d6c9e2332.jpeg",
							"https://s3.bmp.ovh/imgs/2024/05/31/40678e475f02bf0e.jpg",
							"https://s3.bmp.ovh/imgs/2024/05/31/35a25a651bb73c5a.jpeg"
						]
					},
					{
						"title": "睡眠质量对健康的影响：如何优化睡眠环境以提高睡眠质量",
						"author": "睡眠专家",
						"count": 20,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/82317232a43806a4.jpeg"
						]
					},
					{
						"title": "预防胜于治疗：日常生活中的简单习惯，帮助您远离疾病",
						"author": "健康倡导者",
						"count": 18,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/825bfcd7151b8b21.png",
							"https://s3.bmp.ovh/imgs/2024/05/31/9ee9501e0bb6d598.jpg",
						]
					},
					{
						"title": "保持活力：日常锻炼的益处",
						"author": "健身狂热者",
						"count": 22,
						"imgUrl": []
					},
					{
						"title": "心理健康：应对压力的策略",
						"author": "心灵导师",
						"count": 28,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/dba37557c0eb5f03.jpeg",
							"https://s3.bmp.ovh/imgs/2024/05/31/f900a1dd6c2000b3.jpeg"
						]
					},
					{
						"title": "探索均衡饮食的重要性：如何在忙碌的生活中保持营养均衡",
						"author": "健康美食家",
						"count": 24,
						"imgUrl": [
							"https://s3.bmp.ovh/imgs/2024/05/31/4e8e398144621866.jpeg",
							"https://s3.bmp.ovh/imgs/2024/05/31/e42c4e23afeef539.png",
						]
					}
				]
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {

			},
			goUserQuestion() {
				uni.navigateTo({
					url: '/pages/userQuestion/userQuestion'
				})
			}
		}
	}
</script>

<style lang="scss">
	.question-container {

		.tabs-wrapper {
			padding: 5px 8px 5px 5px;
			background-color: #ffffff;
		}
		
		.question-btn {
			position: fixed;
			right: 20px;
			bottom: 50px;
			z-index: 99;
			@include flex(center, center);
			width: 60px;
			height: 60px;
			border-radius: 50%;
			// font-weight: bold;
			background: linear-gradient(to top right, #4facfe 0%, #00f2fe 100%);
		}

		.question-wrap {
			padding: 0px 15px;

			.question-items {
				@include flex(space-between);
				margin-bottom: 10px;
				padding: 5px 0px 10px;
				border-bottom: 1px solid #f0f0f0;
				background-color: #ffffff;

				.question-left {
					@include flex($justify: space-between, $direction: column);
					padding-right: 10px;

					.question-title {
						@include text-lines(2);
						font-size: 16px;
						color: #303133;
					}

					.question-img {
						@include flex;
						margin: 5px 0px;

						.item {
							margin-right: 3px;
						}
					}

					.question-info {
						font-size: 12px;
						color: #767a82;
					}
				}
			}
		}
	}
</style>